<template>
	<div class="pad-lft-rgt-10 pad-top-20">
		<div class="flex-justify-start mar-btm">
			<div class="font-size-14 mar-rgt-5">组件名称: </div>
			<div class="font-size-14 font-weight-bold">{{widget.name}}</div>
		</div>
		<div class="divider"></div>
		<div v-for="(item, idx) in widget.logicList" :key="idx">
			<div class="flex-justify-between">
				<div class="status-handle-title">{{item.name}}</div>
				<div class="edit-btn">
					<span class="el-icon-edit-outline font-hover-primary cursor-pointer" @click="editStatusHandle(idx)"></span>
					<span class="el-icon-delete cursor-pointer font-hover-danger mar-lft-10" @click="deleteStatusHandle(idx)"></span>
				</div>
			</div>
			<el-divider></el-divider>
		</div>
		<div class="text-align-center">
			<el-button type="primary" size="small" class="mar-top" @click="addStatusHandle">新增组件状态处理</el-button>
		</div>
		<el-dialog
			:visible.sync="showRuleDialog"
			:title="isEditRule ? '编辑规则配置' : '新增规则配置'"
			:append-to-body="true"
			:close-on-click-modal="false"
			width="750px">
			<IftttLogicForm
				:rule-form="ruleForm"
				@cancel="showRuleDialog = false"
				@confirm="submitLogicRule"></IftttLogicForm>
		</el-dialog>
	</div>
</template>

<script>
	import {WidgetClass} from "@/modules/IDE/widget/atom/widget";
	import IftttLogicForm from "@/page/IDE/editor/global/IftttLogicForm.vue";
	import {confirmHandle, deepCopy} from "@/utils";

	export default {
    name: "StatusDock",
		components: {
			IftttLogicForm
		},
		props: {
			widget: {
				type: WidgetClass,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {
				showRuleDialog: false,
				isEditRule: false,
				ruleForm: {
					type: "relatedAtomic",
					name: '触发条件',
					atomic: '',
					atomicPorts: '',
					actions: [],
					value: '',
					remarks: ''
				},
				selectRuleIdx: 0,
			}
		},
		methods: {
			addStatusHandle() {
				this.isEditRule = false;
				this.ruleForm = {
					type: "relatedAtomic",
					name: '触发条件',
					atomic: this.widget.id,
					atomicPorts: '',
					actions: [],
					value: '',
					remarks: ''
				};
				this.showRuleDialog = true;
			},
			editStatusHandle(index) {
				this.showRuleDialog = true;
				this.selectRuleIdx = index;
				this.ruleForm = deepCopy(this.widget.logicList[index]);
				this.isEditRule = true;
			},
			deleteStatusHandle(index) {
				const rule = this.widget.logicList[index];
				confirmHandle({label: `确定要删除规则：${rule.name} 吗?`}).then(() => {
					this.widget.logicList.splice(index, 1);
				}).catch(() => {
				});
			},
			submitLogicRule() {
				if (!this.isEditRule) {
					this.widget.logicList.push(deepCopy(this.ruleForm));
				} else {
					this.widget.logicList.splice(this.selectRuleIdx, 1, deepCopy(this.ruleForm));
				}
				this.showRuleDialog = false;
			}
		}
  }
</script>

<style scoped lang="less">

	.status-handle-title {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 14px;
		color: @colorGray10;
		padding: 12px 0;
	}

	.divider {
		height: 8px;
		background: @colorGray96;
		margin-left: -10px;
		margin-right: -10px;
	}

</style>
